函式提升 (hoisting)

下面先來說明執行環境是 如何解析程式碼的
例子 1:
var a = 1;
執行環境 分成兩個階段：
1.創造環境：記憶體會先把 a 記起來，此時若去查找 a 會出現 undefined
2.執行：此時才會把 1 這個值賦予給 a
所以順序就是：
創造環境：var a;
執行(賦值)： a = 1;

※ 函式陳述式在創造階段就會優先載入 (可以運行)

範例 1

var Ming = '小明';
console.log(Ming);

// 拆解
var Ming; // 創造階段:先宣告變數
Ming = '小明'; // 執行:賦予值
console.log(Ming);

範例 2：函式陳述式

callName();
function callName() {
  console.log('呼叫小明');
}

結果為：呼叫小明
函式在創造階段時就已經載入，所以可以正常運行，
像這種 執行函式先 而宣告函式在後，就可以稱為函式提升。

//拆解
//創造階段
function callName() {
  console.log('呼叫小明');
}
//執行
callName();

範例 3：函式表達式

var callName = function(){
  console.log('呼叫小明');
}
callName(); // 呼叫小明

若是callName() 在 表達式之前呼叫

callName(); 
var callName = function(){
  console.log('呼叫小明');
}
// Uncaught TypeError: callName is not a function

讓我們來拆解看看怎麼回事

// 創造階段
var callName; // undefined
// 執行
callName = function(){
  console.log('呼叫小明');
}
// callName 尚在未賦值階段，所以會跳錯

範例 4：陳述式與表達式之誰才是我要呼叫的小明

function callName() {
 console.log('呼叫小明 1');
}
var callName = function () {
 console.log('呼叫小明 2');
}
callName(); 
//呼叫小明 2

此節重點，函式優先

function callName() {
 console.log('呼叫小明 1');
}
var callName;
//執行
callName = function () {
 console.log('呼叫小明 2');
} // 此時會把小明1 給覆蓋過去
callName();
//所以答案是 呼叫小明 2

範例 5

callName();
function callName(){
  console.log(Ming);
}
var Ming = '小明';

// undefined

拆解

// 創造階段
function callName(){
  console.log(Ming);
}
var Ming;
// 執行
callName(); // 此時的 Ming 尚未賦予值 所以是 undefined
Ming = '小明';

小測驗：請試著拆解下面程式碼

whosName();
function whosName(){
  if(name){
    name = '杰倫';
  }
}
var name = '小明';
console.log(name);

x
x
x
x
x
x
x
x
答案是 小明

//創造
function whosName(){
  if(name){
    name = '杰倫';
  }
}
var name;
//執行
whosName(); // 此時 name = undefined
name = '小明'; // 此時 name 被重新賦予值 小明
console.log(name); // 答案為小明